<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script src="../bower_components/platform/platform.js"></script>
    <link rel="import" href="../api/jscut-geometry.html">
</head>
<body>
    <svg width="800" height="400" preserveAspectRatio="xMinYMin meet"></svg>

    <script>
        window.addEventListener('HTMLImportsLoaded', function (e) {
            var svg = document.querySelector('svg');
            var svgNS = "http://www.w3.org/2000/svg";

            function addToSvg(attrs, geometry) {
                var path = document.createElementNS(svgNS, "path");
                path.setAttribute('d', jscut.geometry.toSvgPathData(geometry, 90));
                for (var k in attrs)
                    path.setAttribute(k, attrs[k]);
                svg.appendChild(path);
                var bbox = svg.getBBox();
                svg.setAttribute("viewBox", (bbox.x - 2) + " " + (bbox.y - 2) + " " + (bbox.width + 4) + " " + (bbox.height + 4));
            }

            var r1 = jscut.geometry.createRect(-50, -50, 50, 50, 'mm');
            addToSvg({ fill: 'red' }, r1);
            addToSvg({ fill: 'cyan' }, jscut.geometry.rotate(r1, 45, 'deg'));
            addToSvg({ fill: 'magenta' }, jscut.geometry.rotate(r1, -Math.PI / 8, 'rad'));

            var r2 = jscut.geometry.scale(r1, .5, .2);
            addToSvg({ fill: 'blue' }, r2);
            addToSvg({ fill: 'green' }, jscut.geometry.translate(r2, 50, 0, 'mm'));
            addToSvg({ fill: 'green' }, jscut.geometry.translate(r2, 0, 20, 'mm'));

            var h = jscut.geometry.createRect(-1, -.5, 1, .5, 'inch');
            var v = jscut.geometry.createRect(-.5, -1, .5, 1, 'inch');
            addToSvg({ fill: 'purple' }, jscut.geometry.translate(jscut.geometry.union(h, v), 4, 0, 'inch'));
            addToSvg({ fill: 'purple' }, jscut.geometry.translate(jscut.geometry.intersect(h, v), 4, 4, 'inch'));
            addToSvg({ fill: 'purple' }, jscut.geometry.translate(jscut.geometry.difference(h, v), 8, 0, 'inch'));
            addToSvg({ fill: 'purple' }, jscut.geometry.translate(jscut.geometry.xor(h, v), 8, 4, 'inch'));

            var u = jscut.geometry.union(h, v);
            addToSvg({ fill: 'purple' }, jscut.geometry.translate(jscut.geometry.grow(u, -10, 'mm', 'square'), 0, 8, 'inch'));
            addToSvg({ fill: 'purple' }, jscut.geometry.translate(jscut.geometry.grow(u, 10, 'mm', 'square'), 0, 12, 'inch'));
            addToSvg({ fill: 'purple' }, jscut.geometry.translate(jscut.geometry.grow(u, -10, 'mm', 'miter'), 4, 8, 'inch'));
            addToSvg({ fill: 'purple' }, jscut.geometry.translate(jscut.geometry.grow(u, 10, 'mm', 'miter'), 4, 12, 'inch'));
            addToSvg({ fill: 'purple' }, jscut.geometry.translate(jscut.geometry.grow(u, -10, 'mm', 'round'), 8, 8, 'inch'));
            addToSvg({ fill: 'purple' }, jscut.geometry.translate(jscut.geometry.grow(u, 10, 'mm', 'round'), 8, 12, 'inch'));
        });
    </script>
</body>
</html>
